<!DOCTYPE html>


<html lang="en">
  

    <head>
      <meta charset="utf-8" />
        
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1"
      />
      <title>《JavaScript高级程序设计》- 第六章：集合引用类型 |  欢迎</title>
  <meta name="generator" content="hexo-theme-ayer">
      
      <link rel="shortcut icon" href="/favicon.ico" />
       
<link rel="stylesheet" href="/dist/main.css">

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css"
      />
      
<link rel="stylesheet" href="/css/custom.css">
 
      <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
       
 

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bulma@5.0.1/bulma.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>

      <!-- mermaid -->
      
      <style>
        .swal2-styled.swal2-confirm {
          font-size: 1.6rem;
        }
      </style>
    <link rel="alternate" href="/atom.xml" title="欢迎" type="application/atom+xml">
</head>
  </html>
</html>


<body>
  <div id="app">
    
      
    <main class="content on">
      <section class="outer">
  <article
  id="post-JavaScript学习/《JavaScript高级程序设计》- 第六章：集合引用类型"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  《JavaScript高级程序设计》- 第六章：集合引用类型
</h1>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2022/02/14/JavaScript%E5%AD%A6%E4%B9%A0/%E3%80%8AJavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E3%80%8B-%20%E7%AC%AC%E5%85%AD%E7%AB%A0%EF%BC%9A%E9%9B%86%E5%90%88%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B/" class="article-date">
  <time datetime="2022-02-14T07:13:48.000Z" itemprop="datePublished">2022-02-14</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript%E5%AD%A6%E4%B9%A0/">JavaScript学习</a>
  </div>
  
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> Word count:</span>
            <span class="post-count">4.1k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> Reading time≈</span>
            <span class="post-count">17 min</span>
        </span>
    </span>
</div>
 
    </div>
      
    <div class="tocbot"></div>




  
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="集合引用类型"><a href="#集合引用类型" class="headerlink" title="集合引用类型"></a>集合引用类型</h2><h3 id="6-1-Object"><a href="#6-1-Object" class="headerlink" title="6.1 Object"></a>6.1 Object</h3><blockquote>
<p>如何使用？</p>
</blockquote>
<ol>
<li>显式创建： <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = <span class="keyword">new</span> <span class="built_in">Object</span>();</span><br><span class="line">person.name = <span class="string">&#x27;zyzc&#x27;</span>;</span><br><span class="line">person.age = <span class="number">18</span>;</span><br></pre></td></tr></table></figure></li>
<li>字面量表示法：【<code>不会</code>调用Object构造函数】 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> person = &#123;</span><br><span class="line">  <span class="attr">name</span>:<span class="string">&#x27;zyzc&#x27;</span>,</span><br><span class="line">  <span class="attr">age</span>:<span class="number">18</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(person[<span class="string">&quot;name&quot;</span>]);    <span class="comment">// zyzc</span></span><br></pre></td></tr></table></figure>
<blockquote>
<pre><code>除了采用`.`来访问属性，还可以使用`[]`
</code></pre>
</blockquote>
</li>
</ol>
<blockquote>
<p>后面<code>第8章</code>还会深入介绍</p>
</blockquote>
<h3 id="6-2-Array"><a href="#6-2-Array" class="headerlink" title="6.2 Array"></a>6.2 Array</h3><h4 id="6-2-1-Array的特点"><a href="#6-2-1-Array的特点" class="headerlink" title="6.2.1 Array的特点"></a>6.2.1 Array的特点</h4><ol>
<li>有序的数据。</li>
<li>每个元素都可以存储<code>任意类型</code>的数据。</li>
<li>数组的大小是<code>动态</code>的。</li>
</ol>
<h4 id="6-2-2-创建数组"><a href="#6-2-2-创建数组" class="headerlink" title="6.2.2 创建数组"></a>6.2.2 创建数组</h4><ol>
<li><p>构造函数创建</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = <span class="keyword">new</span> <span class="built_in">Array</span>();   <span class="comment">// 创建空数组</span></span><br><span class="line"><span class="keyword">let</span> arr2 = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">3</span>);  <span class="comment">// 创建长度为3的数组</span></span><br><span class="line"><span class="keyword">let</span> arr3 = <span class="keyword">new</span> <span class="built_in">Array</span>(<span class="string">&quot;red&quot;</span>,<span class="string">&quot;blue&quot;</span>,<span class="string">&quot;yellow&quot;</span>);  <span class="comment">// 初始化三个元素</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>参数中，如果是<code>数值</code>，则表示长度，如果是<code>字符串</code>，则表示<code>初始化元素</code>。</p>
</blockquote>
</li>
<li><p>数组字面量表示法</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr1 = [];  <span class="comment">// 创建空数组</span></span><br><span class="line"><span class="keyword">let</span> arr2 = [<span class="string">&quot;red&quot;</span>,<span class="string">&quot;blue&quot;</span>,<span class="string">&quot;yellow&quot;</span>]; <span class="comment">// 初始化三个元素</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="6-2-3-数组的静态方法"><a href="#6-2-3-数组的静态方法" class="headerlink" title="6.2.3 数组的静态方法"></a>6.2.3 数组的静态方法</h4><blockquote>
<p>Array在ES6新增两个<code>创建数组</code>的<code>静态方法</code>。</p>
</blockquote>
<ol>
<li><code>from()</code>：将<code>类数组结构</code>转换为<code>数组实例</code>:<br><ul>
<li>第一个参数是<code>目标数组</code>，</li>
<li>第二个参数是<code>映射函数</code>（可选）,</li>
<li>第三个参数是<code>映射函数作用域this指向</code>（可选）<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">      <span class="keyword">let</span> a = <span class="string">&quot;zyzc&quot;</span>;</span><br><span class="line">      <span class="keyword">let</span> b = <span class="built_in">Array</span>.from(a,<span class="function"><span class="keyword">function</span>(<span class="params">item</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> item + <span class="built_in">this</span>.aim;</span><br><span class="line">      &#125;,&#123;</span><br><span class="line">        <span class="attr">aim</span>:<span class="string">&#x27;|&#x27;</span></span><br><span class="line">      &#125;);</span><br><span class="line">      <span class="built_in">console</span>.log(b);   <span class="comment">// [ &#x27;z|&#x27;, &#x27;y|&#x27;, &#x27;z|&#x27;, &#x27;c|&#x27; ]</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> <span class="string">`of()`</span>：将<span class="string">`参数`</span>转化为<span class="string">`数组实例`</span></span><br><span class="line">   </span><br><span class="line">    <span class="string">``</span><span class="string">`JS</span></span><br><span class="line"><span class="string">      let a = Array.of(1,2,3,4,5);</span></span><br><span class="line"><span class="string">      console.log(a);   // [1,2,3,4,5];</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ol>
<h4 id="6-2-4-数组索引"><a href="#6-2-4-数组索引" class="headerlink" title="6.2.4 数组索引"></a>6.2.4 数组索引</h4><blockquote>
<p>索引从0开始，如果操作的索引<code>大于</code>数组的长度，则<code>自动扩展</code>。而数组最多可以包含<code>4 294 967 295</code>个元素。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = [<span class="string">&quot;red&quot;</span>,<span class="string">&quot;blue&quot;</span>,<span class="string">&quot;yellow&quot;</span>];</span><br><span class="line">colors[<span class="number">2</span>] = <span class="string">&quot;black&quot;</span>;    <span class="comment">// 修改第三项</span></span><br><span class="line">colors[<span class="number">3</span>] = <span class="string">&quot;white&quot;</span>;    <span class="comment">// 新增第四项</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>length属性，<code>不只是可读</code>，还可通过修改length<code>增加</code>、<code>删除</code>数组元素。</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> colors = [<span class="string">&quot;red&quot;</span>,<span class="string">&quot;blue&quot;</span>,<span class="string">&quot;yellow&quot;</span>];</span><br><span class="line">colors.length = <span class="number">4</span>;  <span class="comment">// 新增第四项空字符串</span></span><br><span class="line">colors.length = <span class="number">2</span>;  <span class="comment">// 删除数组末两个元素</span></span><br></pre></td></tr></table></figure>

<h4 id="6-2-5-检测数组"><a href="#6-2-5-检测数组" class="headerlink" title="6.2.5 检测数组"></a>6.2.5 检测数组</h4><blockquote>
<p>使用<code>isArray()</code>可以检测是否为数组</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="built_in">Array</span>.isArray(arr))&#123;</span><br><span class="line">  <span class="comment">// 进行数组操作</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="6-2-6-迭代器方法"><a href="#6-2-6-迭代器方法" class="headerlink" title="6.2.6 迭代器方法"></a>6.2.6 迭代器方法</h4><p>Array原型上暴露了3个检索数组内容的方法：</p>
<ul>
<li><code>keys()</code>：返回<code>数组索引</code></li>
<li><code>values()</code>：返回<code>数组元素</code></li>
<li><code>entries()</code>：返回<code>索引/值对</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> colors = [<span class="string">&quot;red&quot;</span>,<span class="string">&quot;blue&quot;</span>,<span class="string">&quot;yellow&quot;</span>];</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> colorsKeys = <span class="built_in">Array</span>.from( colors.keys() );</span><br><span class="line"><span class="keyword">const</span> colorsValues = <span class="built_in">Array</span>.from( colors.values() );</span><br><span class="line"><span class="keyword">const</span> colorsEntires = <span class="built_in">Array</span>.from( colors.entries() );</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(colorsKeys);      <span class="comment">//  [ 0, 1, 2 ] </span></span><br><span class="line"><span class="built_in">console</span>.log(colorsValues);  <span class="comment">//  [ &#x27;red&#x27;, &#x27;blue&#x27;, &#x27;yellow&#x27; ] </span></span><br><span class="line"><span class="built_in">console</span>.log(colorsEntires); <span class="comment">//  [ [ 0, &#x27;red&#x27; ], [ 1, &#x27;blue&#x27; ], [ 2, &#x27;yellow&#x27; ] ] </span></span><br></pre></td></tr></table></figure>

<h4 id="6-2-7-复制和填充方法"><a href="#6-2-7-复制和填充方法" class="headerlink" title="6.2.7 复制和填充方法"></a>6.2.7 复制和填充方法</h4><p>ES6新增了两个<code>复制</code>和<code>填充</code>的方法：</p>
<ol>
<li><p><code>copyWithin(target[,start,end])</code>:将[start,end)的元素，复制到索引target开始的地方。<br></p>
<ul>
<li><p>target:复制到指定目标索引位置</p>
</li>
<li><p>start:元素复制的起始位置。</p>
</li>
<li><p>end:停止复制的索引位置 (默认为 array.length)。若是<code>负数</code>则表示<code>-x+length</code></p>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fruits = [<span class="string">&quot;Banana&quot;</span>, <span class="string">&quot;Orange&quot;</span>, <span class="string">&quot;Apple&quot;</span>, <span class="string">&quot;Mango&quot;</span>, <span class="string">&quot;Kiwi&quot;</span>, <span class="string">&quot;Papaya&quot;</span>];</span><br><span class="line"><span class="keyword">let</span> newArr1 = fruits.copyWithin(<span class="number">2</span>, <span class="number">0</span>, -<span class="number">4</span>);  <span class="comment">// -4+fruits.length = 2;  </span></span><br><span class="line"><span class="keyword">let</span> newArr2 = fruits.copyWithin(<span class="number">2</span>, <span class="number">0</span>, <span class="number">2</span>);   <span class="comment">// 与上面一致</span></span><br><span class="line"><span class="built_in">console</span>.log(newArr1); <span class="comment">// [ &#x27;Banana&#x27;, &#x27;Orange&#x27;, &#x27;Banana&#x27;, &#x27;Orange&#x27;, &#x27;Kiwi&#x27;, &#x27;Papaya&#x27; ]</span></span><br><span class="line"><span class="built_in">console</span>.log(newArr2); <span class="comment">// [ &#x27;Banana&#x27;, &#x27;Orange&#x27;, &#x27;Banana&#x27;, &#x27;Orange&#x27;, &#x27;Kiwi&#x27;, &#x27;Papaya&#x27; ]</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>静默忽略超出数组边界、零长度、方向相反的索引</p>
</blockquote>
</li>
<li><p><code>fill(target[,start,end])</code>:将<code>tartget</code>元素，填充到[start,end)的位置上</p>
<ul>
<li>target:需要填充的元素 </li>
<li>start:元素填充的起始位置，默认为0;</li>
<li>end:停止填充的索引位置 (默认为 array.length)。若是<code>负数</code>则表示<code>-x+length</code>，默认为<code>length</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fruits = [<span class="string">&quot;Banana&quot;</span>, <span class="string">&quot;Orange&quot;</span>, <span class="string">&quot;Apple&quot;</span>, <span class="string">&quot;Mango&quot;</span>, <span class="string">&quot;Kiwi&quot;</span>, <span class="string">&quot;Papaya&quot;</span>];</span><br><span class="line"><span class="keyword">let</span> newArr1 = fruits.fill(<span class="string">&#x27;Watermelon&#x27;</span>,<span class="number">0</span>,<span class="number">2</span>);</span><br></pre></td></tr></table></figure></li>
</ol>
<blockquote>
<p>静默忽略超出数组边界、零长度、方向相反的索引</p>
</blockquote>
<h4 id="6-2-8-转换方法"><a href="#6-2-8-转换方法" class="headerlink" title="6.2.8 转换方法"></a>6.2.8 转换方法</h4><ol>
<li><code>toLocaleString()</code>：返回数组的字符串表示</li>
<li><code>toString()</code>：返回数组的字符串表示</li>
<li><code>toValueOf()</code>：返回数组本身</li>
<li><code>join(str)</code>：向元素间添加分隔符，并返回对应字符串。【默认使用<code>逗号</code>】</li>
</ol>
<h4 id="6-2-9-栈方法"><a href="#6-2-9-栈方法" class="headerlink" title="6.2.9 栈方法"></a>6.2.9 栈方法</h4><ol>
<li><code>pop()</code>：退栈</li>
<li><code>push()</code>：压栈</li>
</ol>
<h4 id="6-2-10-队列方法"><a href="#6-2-10-队列方法" class="headerlink" title="6.2.10 队列方法"></a>6.2.10 队列方法</h4><ol>
<li><code>shift()</code>：删除并返回第一项数据</li>
<li><code>unshift()</code>：向<code>数组首部</code>添加数据</li>
<li><code>push()</code>：向<code>数组末尾</code>添加一项数据</li>
</ol>
<h4 id="6-2-11-排序方法"><a href="#6-2-11-排序方法" class="headerlink" title="6.2.11 排序方法"></a>6.2.11 排序方法</h4><ol>
<li><p><code>reverse()</code>：反转数组</p>
</li>
<li><p><code>sort()</code>：将<code>元素</code>通过<code>String()</code>转型后，比较<code>字符串</code>来按照<code>升序</code>重新排列数组元素。</p>
<ul>
<li>比较函数（可选）</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">/* </span></span><br><span class="line"><span class="comment">   比较函数接收两个参数:</span></span><br><span class="line"><span class="comment">     1. 若返回负值，则第一个数排在第二个数前面</span></span><br><span class="line"><span class="comment">     2. 若返回正值，则第二个数排在第一个数前面</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="comment">// 升序排序</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ASCcompare</span>(<span class="params">value1,value2</span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 其实可以完全简写为 return value1 - value2;</span></span><br><span class="line">  <span class="keyword">if</span>(value1 &gt; value2) &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span>( value1 &lt; value2) &#123;</span><br><span class="line">     <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 降序排序</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">DESCcompare</span>(<span class="params">value1,value2</span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 其实可以完全简写为 return value2 - value1;</span></span><br><span class="line">  <span class="keyword">if</span>(value1 &gt; value2) &#123;</span><br><span class="line">     <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> <span class="keyword">if</span>( value1 &lt; value2) &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">     <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> values = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">5</span>,<span class="number">10</span>,<span class="number">15</span>];</span><br><span class="line"><span class="built_in">console</span>.log(values.sort());               <span class="comment">// [ 0, 1, 10, 15, 5 ] </span></span><br><span class="line"><span class="built_in">console</span>.log(values.sort(ASCcompare));     <span class="comment">// [ 0, 1, 5, 10, 15 ]</span></span><br><span class="line"><span class="built_in">console</span>.log(values.sort(DESCcompare));    <span class="comment">// [ 15, 10, 5, 1, 0 ]</span></span><br></pre></td></tr></table></figure></li>
</ol>
<h4 id="6-2-12-操作方法"><a href="#6-2-12-操作方法" class="headerlink" title="6.2.12 操作方法"></a>6.2.12 操作方法</h4><ol>
<li><p><code>concat()</code>：用于字符串的拼接。</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> string1 = <span class="string">&quot;Hello,&quot;</span></span><br><span class="line"><span class="built_in">console</span>.log(string1.concat(<span class="string">&quot;world!&quot;</span>));  <span class="comment">// Hello,world!</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>slice(start[,end])</code>：返回 [start,end)之间的元素，将传入的负参数与字符串长度相加。</p>
 <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> test = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(test.slice(<span class="number">3</span>));   <span class="comment">// lo world</span></span><br><span class="line"><span class="built_in">console</span>.log(test.slice(-<span class="number">3</span>));  <span class="comment">// rld</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><code>splice()</code>：强大的数组方法</p>
<ul>
<li><p>删除：传入<code>2个参数</code>，第一个参数：要删除的<code>第一个元素索引</code>；第二个参数：要删除的<code>元素数量</code>。</p>
</li>
<li><p>插入：传入<code>3个参数</code>，第一个参数：要插入的<code>开始位置</code>（超出长度则在末尾插入）；第二个参数：0（表示要删除0个元素），第三个参数之后：要插入的元素。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">arr.splice(<span class="number">5</span>,<span class="number">0</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>);  <span class="comment">// 用索引5开始插入元素6，7，8</span></span><br><span class="line"><span class="built_in">console</span>.log(arr);   <span class="comment">// [1, 2, 3, 4,5, 6, 7, 8]</span></span><br></pre></td></tr></table></figure></li>
<li><p>替换：传入<code>3个参数</code>，第一个参数：要<code>替换的位置</code>；第二个参数：要<code>替换的个数</code>，第三个参数之后：<code>替换的元素</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>];</span><br><span class="line">arr.splice(<span class="number">2</span>,<span class="number">3</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>);  <span class="comment">// 用索引5开始插入元素6，7，8</span></span><br><span class="line"><span class="built_in">console</span>.log(arr);   <span class="comment">// [1, 2, 6, 7, 8]</span></span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ol>
<h4 id="6-2-13-搜索和位置方法"><a href="#6-2-13-搜索和位置方法" class="headerlink" title="6.2.13 搜索和位置方法"></a>6.2.13 搜索和位置方法</h4><p>ECMAScript：提供<code>两类</code>搜索数组的方法：</p>
<ol>
<li><p>按<code>严格相等</code>搜索</p>
<blockquote>
<p><code>严格相等</code>：两个参数比较的时候，使用全等（===）比较。</p>
</blockquote>
<ul>
<li>indexOf(aim[,startPosition])：<code>从前往后</code>找给定元素并<code>返回索引</code>，未找到则返回-1；<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> text = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(text.indexOf(<span class="string">&quot;o&quot;</span>)); <span class="comment">// 4</span></span><br><span class="line"><span class="built_in">console</span>.log(text.indexOf(<span class="string">&quot;o&quot;</span>,<span class="number">6</span>)); <span class="comment">// 7</span></span><br></pre></td></tr></table></figure></li>
<li>lastIndexOf(aim[,startPosition])：<code>从后往前</code>找给定元素并<code>返回索引</code>，未找到则返回-1；<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> text = <span class="string">&quot;hello world&quot;</span>;</span><br><span class="line"><span class="built_in">console</span>.log(text.lastIndexOf(<span class="string">&quot;o&quot;</span>)); <span class="comment">// 7</span></span><br><span class="line"><span class="built_in">console</span>.log(text.lastIndexOf(<span class="string">&quot;o&quot;</span>,<span class="number">6</span>)); <span class="comment">// 4</span></span><br></pre></td></tr></table></figure></li>
<li>includes(aim[,startPosition])：判断是否包括指定元素</li>
</ul>
</li>
<li><p>按<code>断言函数</code>搜索</p>
<blockquote>
<p><code>断言函数</code>接收<code>三个参数</code>：元素、索引和数组本身。</p>
</blockquote>
<ul>
<li>find()：返回匹配到的第一个元素</li>
<li>findIndex()：返回匹配到的第一个元素的索引<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>];</span><br><span class="line"><span class="keyword">let</span> newArr = arr.find(<span class="function"><span class="keyword">function</span>(<span class="params">element,index,array</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(element &gt;= <span class="built_in">this</span>.aim) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,&#123; <span class="comment">// 第三个参数：表示断言函数中this指向的作用域</span></span><br><span class="line">  <span class="attr">aim</span>:<span class="number">5</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(newArr);</span><br></pre></td></tr></table></figure></li>
</ul>
</li>
</ol>
<h4 id="6-2-14-迭代方法"><a href="#6-2-14-迭代方法" class="headerlink" title="6.2.14 迭代方法"></a>6.2.14 迭代方法</h4><p>ECMAScript为数组定义了<code>5个迭代方法</code>，这些方法都<code>不改变原数组</code>，每个方法都接收<code>两个参数</code>：</p>
<ul>
<li>第一个参数：<code>断言函数</code>。</li>
<li>第二个参数：<code>断言函数</code>中的<code>this</code>指向的<code>作用域对象</code>。</li>
</ul>
<blockquote>
<p>迭代方法：</p>
</blockquote>
<ol>
<li><p>every()：<code>每一项</code>函数都返回<code>true</code>,则这个方法返回<code>true</code>。</p>
</li>
<li><p>some()：<code>有一项</code>函数返回<code>true</code>,则这个方法返回<code>true</code>。</p>
</li>
<li><p>filter()：返回<code>true</code>的项，组成数组后返回。</p>
</li>
<li><p>forEach()：没有返回值。</p>
</li>
<li><p>map()：每次<code>调用函数的结果</code>构成的数组。</p>
</li>
</ol>
<h4 id="6-2-15-归并方法"><a href="#6-2-15-归并方法" class="headerlink" title="6.2.15 归并方法"></a>6.2.15 归并方法</h4><blockquote>
<p><code>归并方法</code>与<code>filter()</code>用法一样，但是<code>归并方法</code>具有记忆：可以获取<code>上一个函数的返回值</code>。</p>
</blockquote>
<ol>
<li>reduce()</li>
<li>reduceRight()</li>
</ol>
  <figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> values =  [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>];</span><br><span class="line"><span class="keyword">let</span> sum = values.reduce(<span class="function"><span class="keyword">function</span>(<span class="params">prev,cur,curIndex,array</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> prev + cur;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(sum); <span class="comment">// 45</span></span><br></pre></td></tr></table></figure>

<h3 id="6-3-定型数组"><a href="#6-3-定型数组" class="headerlink" title="6.3 定型数组"></a>6.3 定型数组</h3><p>定型数组<code>typed array</code>是ECMAScript新增的结构，目的是：<code>提升向原生库传输数据的效率</code>。但是JavaScript没有<code>TypedArray</code>类型，它所指的是<code>一种特殊的包含数值类型的数组</code>。</p>
<blockquote>
<p>后面有需要再深入学习</p>
</blockquote>
<h3 id="6-4-Map"><a href="#6-4-Map" class="headerlink" title="6.4 Map"></a>6.4 Map</h3><p><code>Map</code>是ES6新增的特性，一种集合类型，用于保存<code>键值对</code>，<code>任何值</code>都可以作为<code>一个键</code>或<code>一个值</code>。</p>
<blockquote>
<p>个人理解：Map里面的键值对，是一种映射的关系。object则一个是变量名，另一个是变量值的意思。</p>
</blockquote>
<h4 id="6-4-1-基本API"><a href="#6-4-1-基本API" class="headerlink" title="6.4.1 基本API"></a>6.4.1 基本API</h4><blockquote>
<p>创建Map</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> emptyMap = <span class="keyword">new</span> <span class="built_in">Map</span>(); <span class="comment">// 创建一个空映射</span></span><br><span class="line"><span class="keyword">const</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>([</span><br><span class="line">  [<span class="string">&quot;key1&quot;</span>,<span class="string">&quot;value1&quot;</span>],</span><br><span class="line">  [<span class="string">&quot;key2&quot;</span>,<span class="string">&quot;value2&quot;</span>],</span><br><span class="line">  [<span class="string">&quot;key3&quot;</span>,<span class="string">&quot;value3&quot;</span>],</span><br><span class="line">])</span><br></pre></td></tr></table></figure>
<blockquote>
<p>操作Map</p>
</blockquote>
<ol>
<li>has(key)：查询是否拥有该键</li>
<li>set(key,value)：添键对值</li>
<li>get(key)：获取键映射的值</li>
<li>size：返回键对的数量</li>
<li>delete(key)：删除键对值</li>
<li>clear()：清空Map映射关系</li>
</ol>
<h4 id="6-4-2-顺序与迭代"><a href="#6-4-2-顺序与迭代" class="headerlink" title="6.4.2 顺序与迭代"></a>6.4.2 顺序与迭代</h4><blockquote>
<p>迭代器方法</p>
<ul>
<li>entries()</li>
<li>keys()</li>
<li>values()</li>
</ul>
</blockquote>
<blockquote>
<p>迭代方法：</p>
<ul>
<li>forEach()</li>
</ul>
</blockquote>
<h4 id="6-4-3-Object-or-Map"><a href="#6-4-3-Object-or-Map" class="headerlink" title="6.4.3 Object or Map?"></a>6.4.3 Object or Map?</h4><blockquote>
<p>Object 和 Map有什么区别？</p>
<ul>
<li>一个 Object 的键只能是<code>字符串或者 Symbols</code>，但一个 Map 的键可以是<code>任意值</code>。</li>
<li>Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。</li>
<li>Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。</li>
<li>Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。</li>
</ul>
</blockquote>
<blockquote>
<p>Object 和 Map 该选谁？</p>
<ol>
<li>内存占用方面：如果给定固定大小的内存，Map大约可以比Object多存储50%的键-值对</li>
<li>插入性能方面：两者新键-值对消耗相当，Map插入速度稍快一点点。如果代码涉及大量<code>插入</code>操作，Map性能更佳。</li>
<li>查找速度方面：两者查询的性能差异极小，如果少量键-值对Object速度更快。如果代码涉及大量<code>查找</code>操作，Object可能会更好</li>
<li>删除性能方面：对于大多数浏览器而言，如果代码涉及大量<code>删除</code>操作，应该选择Map。</li>
</ol>
</blockquote>
<h3 id="6-5-WeakMap"><a href="#6-5-WeakMap" class="headerlink" title="6.5 WeakMap"></a>6.5 WeakMap</h3><h4 id="6-5-1-基本API"><a href="#6-5-1-基本API" class="headerlink" title="6.5.1 基本API"></a>6.5.1 基本API</h4><p>ES6新增<code>“弱映射”（WeakMap）</code>是一种新的集合类型，是<code>Map</code>的兄弟类型。但是其中<code>键</code>只能是<code>Object</code>类型</p>
<blockquote>
<p>创建WeakMap</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> key1 = &#123;<span class="attr">id</span>:<span class="number">1</span>&#125;,</span><br><span class="line">      key2 = &#123;<span class="attr">id</span>:<span class="number">2</span>&#125;,</span><br><span class="line">      key3 = &#123;<span class="attr">id</span>:<span class="number">3</span>&#125;;</span><br><span class="line"><span class="keyword">const</span> wm = <span class="keyword">new</span> <span class="built_in">WeakMap</span>([</span><br><span class="line">    [key1,<span class="string">&quot;value1&quot;</span>],</span><br><span class="line">    [key2,<span class="string">&quot;value2&quot;</span>],</span><br><span class="line">    [key3,<span class="string">&quot;value3&quot;</span>]</span><br><span class="line">]);</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>键</code>只能是<code>Object类型</code>，所以可以将<code>原始值</code>进行包装后再用作<code>键</code>。</p>
</blockquote>
<blockquote>
<p>操作WeakMap：</p>
<ol>
<li>has(key)：查询是否拥有该键</li>
<li>set(key,value)：添键对值</li>
<li>get(key)：获取键映射的值</li>
<li>delete(key)：删除键对值</li>
</ol>
</blockquote>
<h4 id="6-5-2-弱键"><a href="#6-5-2-弱键" class="headerlink" title="6.5.2 弱键"></a>6.5.2 弱键</h4><p><code>Weak</code>表示弱映射的键不属于正式的引用，不会阻止垃圾回收；</p>
<p>但弱映射的值不是<code>weak</code>的，只要键存在，键对值就会存在，且键作为值得引用。因此不会被垃圾回收。</p>
<h4 id="6-5-3-不可迭代键"><a href="#6-5-3-不可迭代键" class="headerlink" title="6.5.3 不可迭代键"></a>6.5.3 不可迭代键</h4><p>因为其中是<code>弱引用</code>的关系，由于其他地方操作成员可能不存在，所以没有迭代、size等操作。</p>
<h4 id="6-5-4-用途"><a href="#6-5-4-用途" class="headerlink" title="6.5.4 用途"></a>6.5.4 用途</h4><ol>
<li><p>私有变量</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> User = ( <span class="function">()=&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> wm = <span class="keyword">new</span> <span class="built_in">WeakMap</span>();	<span class="comment">// 创建弱映射</span></span><br><span class="line">    </span><br><span class="line">    <span class="class"><span class="keyword">class</span> <span class="title">User</span> </span>&#123;</span><br><span class="line">        <span class="function"><span class="title">constructor</span>(<span class="params">id</span>)</span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.idProperty = <span class="built_in">Symbol</span>(<span class="string">&#x27;id&#x27;</span>);	<span class="comment">// 声明私有属性</span></span><br><span class="line">            <span class="built_in">this</span>.setId(id);	<span class="comment">// 调调用</span></span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="function"><span class="title">setPrivate</span>(<span class="params">property,value</span>)</span>&#123;	<span class="comment">// 设设置私有属性</span></span><br><span class="line">            <span class="keyword">const</span> priveteMembers = wm.get(<span class="built_in">this</span>) || &#123;&#125;;</span><br><span class="line">            privateMembers[property] = value;</span><br><span class="line">            wm.set(<span class="built_in">this</span>,privateMembers);</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="function"><span class="title">getPrivate</span>(<span class="params">property</span>)</span> &#123;	<span class="comment">// 获取私有属性</span></span><br><span class="line">            <span class="keyword">return</span> wm.get(<span class="built_in">this</span>)[property];</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="function"><span class="title">setId</span>(<span class="params">id</span>)</span>&#123;</span><br><span class="line">            <span class="built_in">this</span>.setPrivate(<span class="built_in">this</span>.idProperty,id);</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="function"><span class="title">getId</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="built_in">this</span>.getPrivate(<span class="built_in">this</span>.idProperty);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> User;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line">	<span class="keyword">const</span> user = <span class="keyword">new</span> User(<span class="number">1</span>);</span><br><span class="line">	<span class="built_in">console</span>.log(user.getId());		<span class="comment">// 1</span></span><br></pre></td></tr></table></figure></li>
<li><p>DOM节点关联元数据</p>
<blockquote>
<p>假如使用Map</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> m = <span class="keyword">new</span> <span class="built_in">Map</span>();</span><br><span class="line"><span class="keyword">const</span> loginButton = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;#login&#x27;</span>);</span><br><span class="line">m.set(loginButton,&#123;<span class="attr">disabled</span>:<span class="literal">true</span>&#125;);</span><br></pre></td></tr></table></figure>

<p>当登录按钮从DOM树删除后，由于映射中还存储着loginButton，都留在内存中。</p>
</blockquote>
<blockquote>
<p>假如使用WeakMap</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> wm = <span class="keyword">new</span> <span class="built_in">WeakMap</span>();</span><br><span class="line"><span class="keyword">const</span> loginButton = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;#login&#x27;</span>);</span><br><span class="line">wm.set(loginButton,&#123;<span class="attr">disabled</span>:<span class="literal">true</span>&#125;);</span><br></pre></td></tr></table></figure>

<p>当登录按钮从DOM树删除后，由于弱映射中键被删除了，垃圾回收机制可以立即释放器内存</p>
</blockquote>
</li>
</ol>
<h3 id="6-6-Set"><a href="#6-6-Set" class="headerlink" title="6.6 Set"></a>6.6 Set</h3><p>ES6新增新集合类型Set，很多方面都很像<code>加强版Map</code>。所以大多数API和行为都是<code>共有的</code>。</p>
<h4 id="6-6-1-基本API"><a href="#6-6-1-基本API" class="headerlink" title="6.6.1 基本API"></a>6.6.1 基本API</h4><blockquote>
<p>创建Set</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">&quot;value1&quot;</span>,<span class="string">&quot;value2&quot;</span>,<span class="string">&quot;value3&quot;</span>]);	<span class="comment">// 传入一个可迭代对象</span></span><br></pre></td></tr></table></figure>
</blockquote>
<blockquote>
<p>操作Set</p>
<ol>
<li>add()：添加值</li>
<li>has()：查询值</li>
<li>size：元素数量</li>
<li>delete()：删除元素</li>
<li>clear()：清除所有元素</li>
</ol>
</blockquote>
<h4 id="6-6-2-顺序与迭代"><a href="#6-6-2-顺序与迭代" class="headerlink" title="6.6.2 顺序与迭代"></a>6.6.2 顺序与迭代</h4><p>Set会维护值插入时的顺序，因此支持按顺序迭代</p>
<blockquote>
<p>迭代器方法</p>
<ul>
<li>entries()：会返回一个迭代器，其包含两个元素，且两个值都是一样的</li>
<li>values()</li>
<li>keys()：是values()的别名</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">&#x27;val1&#x27;</span>,<span class="string">&#x27;val2&#x27;</span>,<span class="string">&#x27;val3&#x27;</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 0. 遍历数组</span></span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> pair <span class="keyword">of</span> s.entries() ) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(pair);</span><br><span class="line">    <span class="comment">//[ &#x27;val1&#x27;, &#x27;val1&#x27; ]</span></span><br><span class="line">	<span class="comment">//[ &#x27;val2&#x27;, &#x27;val2&#x27; ]</span></span><br><span class="line">	<span class="comment">//[ &#x27;val3&#x27;, &#x27;val3&#x27; ]</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1. 如果 原始值 作为 集合的值 不会被修改</span></span><br><span class="line"><span class="keyword">let</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> values <span class="keyword">of</span> s.values() ) &#123;</span><br><span class="line">    values = <span class="string">`newValue<span class="subst">$&#123;++i&#125;</span>`</span>;</span><br><span class="line">    <span class="built_in">console</span>.log(values);	<span class="comment">// newValue1,newValue2,newValue3</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> values <span class="keyword">of</span> s.values() ) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(values);	<span class="comment">// val1,val2,val3</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2. 如果 引用值 作为 集合的值 可以被修改</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> j = <span class="number">3</span>;</span><br><span class="line"><span class="keyword">const</span> s2 = <span class="keyword">new</span> <span class="built_in">Set</span>([&#123;<span class="attr">id</span>:<span class="number">1</span>&#125;,&#123;<span class="attr">id</span>:<span class="number">2</span>&#125;,&#123;<span class="attr">id</span>:<span class="number">3</span>&#125;]);</span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> item <span class="keyword">of</span> s2.values() ) &#123;</span><br><span class="line">    item.id = ++j;</span><br><span class="line">    <span class="built_in">console</span>.log(item.id);	<span class="comment">// 4,5,6</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">for</span>( <span class="keyword">let</span> item <span class="keyword">of</span> s2.values() ) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(item.id);	<span class="comment">// 4,5,6</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</blockquote>
<blockquote>
<p>迭代方法：</p>
<ul>
<li>forEach()：</li>
</ul>
</blockquote>
<h3 id="6-7-WeakSet"><a href="#6-7-WeakSet" class="headerlink" title="6.7 WeakSet"></a>6.7 WeakSet</h3><blockquote>
<p>WeakSet和WeakMap的思想差不多，这里就不再多写笔记了。</p>
</blockquote>
<h3 id="6-8-Set定义集合操作对象"><a href="#6-8-Set定义集合操作对象" class="headerlink" title="6.8 Set定义集合操作对象"></a>6.8 Set定义集合操作对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">XSet</span> <span class="keyword">extends</span> <span class="title">Set</span> </span>&#123;</span><br><span class="line">  <span class="function"><span class="title">union</span>(<span class="params">...sets</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> XSet.union(<span class="built_in">this</span>,...sets);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">intersection</span>(<span class="params">...sets</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> XSet.intersection(<span class="built_in">this</span>,...sets);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">difference</span>(<span class="params">set</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> XSet.difference(<span class="built_in">this</span>,set);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">symmetricDifference</span>(<span class="params">set</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> XSet.cartesianProduct(<span class="built_in">this</span>,set);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="function"><span class="title">powerSet</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> XSet.powerSet(<span class="built_in">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="comment">// 返回两个或更多集合的并集</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">union</span>(<span class="params">a,...bSets</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> unionSet = <span class="keyword">new</span> XSet(a);</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">const</span> b <span class="keyword">of</span> bSets)&#123;</span><br><span class="line">          <span class="keyword">for</span>(<span class="keyword">const</span> bValue <span class="keyword">of</span> b) &#123;</span><br><span class="line">              unionSet.add(bValue);</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> unionSet;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">// 返回两个或更多集合的交集</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">intersection</span>(<span class="params">a,...bSets</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> intersectionSet = <span class="keyword">new</span> XSet(a);</span><br><span class="line">      <span class="keyword">for</span>(<span class="keyword">const</span> aValue <span class="keyword">of</span> intersectionSet) &#123;</span><br><span class="line">          <span class="keyword">for</span>(<span class="keyword">const</span> b <span class="keyword">of</span> bSets) &#123;</span><br><span class="line">              <span class="keyword">if</span>(!b.has(aValue)) &#123;</span><br><span class="line">                  intersectionSet.delete(aValue);</span><br><span class="line">              &#125;</span><br><span class="line">          &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> intersectionSet;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 返回两个集合的差集</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">difference</span>(<span class="params">a,b</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> differenceSet = <span class="keyword">new</span> XSet(a);</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">const</span> bValue <span class="keyword">of</span> b)&#123;</span><br><span class="line">      <span class="keyword">if</span>(a.has(bValue))&#123;</span><br><span class="line">        differenceSet.delete(bValue);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> differenceSet;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 返回两个集合的对称差集</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">symmetricDifference</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> a.union(b).difference(a.intersection(b));</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 返回两个集合的笛卡尔积</span></span><br><span class="line">  <span class="keyword">static</span> <span class="function"><span class="title">cartesianProduct</span>(<span class="params">a, b</span>)</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> cartesianProductSet = <span class="keyword">new</span> XSet();</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">const</span> aValue <span class="keyword">of</span> a) &#123;</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">const</span> bValue <span class="keyword">of</span> b) &#123;</span><br><span class="line">        cartesianProductSet.add([aValue, bValue]);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> cartesianProductSet;</span><br><span class="line">  &#125; </span><br><span class="line">  </span><br><span class="line">  <span class="comment">// 返回一个集合的幂集</span></span><br><span class="line">    <span class="keyword">static</span> <span class="function"><span class="title">powerSet</span>(<span class="params">a</span>)</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> powerSet = <span class="keyword">new</span> XSet().add(<span class="keyword">new</span> XSet());</span><br><span class="line">      <span class="keyword">for</span> (<span class="keyword">const</span> aValue <span class="keyword">of</span> a) &#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">const</span> set <span class="keyword">of</span> <span class="keyword">new</span> XSet(powerSet)) &#123;</span><br><span class="line">          powerSet.add(<span class="keyword">new</span> XSet(set).add(aValue));</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">return</span> powerSet;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> s1 = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]);</span><br><span class="line"><span class="keyword">const</span> s2 = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>]);</span><br><span class="line"><span class="keyword">const</span> helper = <span class="keyword">new</span> XSet();		<span class="comment">// 创建工具对象</span></span><br><span class="line"><span class="built_in">console</span>.log(helper.union(s1,s2));</span><br></pre></td></tr></table></figure>





<h3 id="6-9-小结"><a href="#6-9-小结" class="headerlink" title="6.9 小结"></a>6.9 小结</h3><blockquote>
<p>关于引用类型：</p>
<ul>
<li>Object类型是一个<code>基础类型</code>，所有<code>引用类型</code>都从它继承了基本的行为</li>
<li>Array类型是一组<code>有序的值</code>，并提供<code>操作</code>和<code>转换</code>值的能力</li>
<li>定型数组包含不同的引用类型，用于<code>管理数值再内存中的类型</code></li>
<li>Date类型提供了关于日期、时间的信息及其计算</li>
<li>RegExp类型，<code>支持正则表达式</code>的接口</li>
</ul>
</blockquote>
<blockquote>
<p>关于函数：</p>
<ul>
<li>函数其实是Function类型的实例，意味着函数也是对象</li>
</ul>
</blockquote>
<blockquote>
<p>关于包装类型：</p>
<ul>
<li>每种包装类型都映射到同名的原始类型</li>
<li>以对象方法操作原始值的时候，后台会包装一个对象，操作后便销毁该包装对象</li>
</ul>
</blockquote>
<blockquote>
<p>关于内置对象</p>
<ul>
<li>Math对象辅助完成复杂的数学计算</li>
<li>Global对象，通过window对象展示在浏览器中</li>
</ul>
</blockquote>
<blockquote>
<p>关于ES6新增引用类型</p>
<ul>
<li>Map</li>
<li>WeakMap</li>
<li>Set</li>
<li>WeakSet</li>
</ul>
<p>这些类型为<code>组织应用程序数据</code>和<code>简化内存管理</code>提供新能力。</p>
</blockquote>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <i class="ri-copyright-line"></i>
          <strong>Copyright： </strong>
          
          Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
          
        </li>
      </ul>
    </div>
    
    <footer class="article-footer">
       
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="//api.qrserver.com/v1/create-qr-code/?size=150x150&data=http://example.com/2022/02/14/JavaScript%E5%AD%A6%E4%B9%A0/%E3%80%8AJavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E3%80%8B-%20%E7%AC%AC%E5%85%AD%E7%AB%A0%EF%BC%9A%E9%9B%86%E5%90%88%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B/" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>  
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/" rel="tag">JavaScript</a></li></ul>

    </footer>
  </div>

   
  <nav class="article-nav">
    
      <a href="/2022/02/17/JavaScript%E5%AD%A6%E4%B9%A0/%E3%80%8AJavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E3%80%8B-%20%E7%AC%AC%E5%85%AB%E7%AB%A0%EF%BC%9A%E5%AF%B9%E8%B1%A1%E3%80%81%E7%B1%BB%E4%B8%8E%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            《JavaScript高级程序设计》- 第八章：对象、类与面向对象编程
          
        </div>
      </a>
    
    
      <a href="/2022/02/13/JavaScript%E5%AD%A6%E4%B9%A0/%E3%80%8AJavaScript%E9%AB%98%E7%BA%A7%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1%E3%80%8B-%20%E7%AC%AC%E4%BA%94%E7%AB%A0%EF%BC%9A%E5%9F%BA%E6%9C%AC%E5%BC%95%E7%94%A8%E7%B1%BB%E5%9E%8B/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">《JavaScript高级程序设计》- 第五章：基本引用类型</div>
      </a>
    
  </nav>

   
<!-- valine评论 -->
<div id="vcomments-box">
  <div id="vcomments"></div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: "#vcomments",
    app_id: "jeb2pvxjdeJQOj5OG3AUavGv-gzGzoHsz",
    app_key: "6YlB9tQJTstHMM8GOwFu4uyY",
    path: window.location.pathname,
    avatar: "monsterid",
    placeholder: "给我的文章加点评论吧~",
    recordIP: true,
  });
  const infoEle = document.querySelector("#vcomments .info");
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function (item) {
      item.parentNode.removeChild(item);
    });
  }
</script>
<style>
  #vcomments-box {
    padding: 5px 30px;
  }

  @media screen and (max-width: 800px) {
    #vcomments-box {
      padding: 5px 0px;
    }
  }

  #vcomments-box #vcomments {
    background-color: #fff;
  }

  .v .vlist .vcard .vh {
    padding-right: 20px;
  }

  .v .vlist .vcard {
    padding-left: 10px;
  }
</style>

 
   
     
</article>

</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2022
        <i class="ri-heart-fill heart_icon"></i> 子与子乘
      </li>
    </ul>
    <ul>
      <li>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>Visitors:<span id="busuanzi_value_site_uv"></span></span>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>Views:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
      </li>
    </ul>
  </div>
</footer>    
    </main>
    <div class="float_btns">
      <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

    </div>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/ayer-side.svg" alt="欢迎"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">友链</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i></p>
  <div class="reward-box">
    
    
  </div>
</div>
    
<script src="/js/jquery-3.6.0.min.js"></script>
 
<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->
 
<script src="/js/tocbot.min.js"></script>

<script>
  tocbot.init({
    tocSelector: ".tocbot",
    contentSelector: ".article-entry",
    headingSelector: "h1, h2, h3, h4, h5, h6",
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: "main",
    positionFixedSelector: ".tocbot",
    positionFixedClass: "is-position-fixed",
    fixedSidebarOffset: "auto",
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script> 
<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->
 
<script src="/js/busuanzi-2.3.pure.min.js"></script>
 
<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->
 
<link rel="stylesheet" href="/css/clipboard.css">
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>
 
<!-- CanvasBackground -->

<script>
  if (window.mermaid) {
    mermaid.initialize({ theme: "forest" });
  }
</script>


    
    

  </div>
</body>

</html>